<template>
  <div class="content">
    <header class="header-wrapper">
      <div class="button-group">
        <el-button
          v-if="merchant.status !== 'REJECT_REVIEW' && merchant.status !== 'SUCCESS_PASS'"
          type="primary"
          class="send-number"
          @click="dialogApplyVisible = true"
        >申请</el-button>
      </div>
      <!--发号对话框-->
      <el-dialog title="提示" :visible.sync="dialogApplyVisible" width="30%" min-width="500px">
        <span>确认复用以上信息作为二级商户入驻审核吗?</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogApplyVisible = false">取 消</el-button>
          <el-button class="el-button-right" type="primary" @click="createChild">确 定</el-button>
        </span>
      </el-dialog>
    </header>
    <div class="container">
      <el-card shadow="hover" class="basic-information">
        <div class="tag">
          <h3>企业基本信息</h3>
        </div>
        <div class="input-container">
          <el-form ref="merchantForm" :rules="rules" :model="merchant">
            <el-row :gutter="56">
              <el-col :span="8">
                <div class="input-wrapper">
                  <span>企业名称</span>
                  <el-input v-model="merchant.company_name" size="medium" />
                  <span v-if="company_name===merchant.company_name" style="color:red;font-size:12px; position: absolute;left:28px;bottom:-12px">企业名称不可重复使用</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="input-wrapper">
                  <span>社会统一信用代码</span>
                  <el-input v-model="merchant.company_code" size="medium" />
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="56">
              <el-col :span="8">
                <div class="input-wrapper">
                  <span>企业类型</span>
                  <el-input
                    v-model="companyTypeMap[merchant.company_type_display]"
                    size="medium"
                    disabled
                  />
                </div>
              </el-col>
              <el-col :span="8">
                <div class="input-wrapper">
                  <span>企业所在省市区信息</span>
                  <el-cascader
                    ref="cascader"
                    v-model="selectedOptions"
                    size="medium"
                    :props="cascaderProps"
                  />
                </div>
              </el-col>
              <el-col :span="8">
                <div class="input-wrapper">
                  <span>企业所在详细地址</span>
                  <el-input v-model="merchant.address" size="medium" />
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="56">
              <el-col :span="8">
                <div class="input-wrapper">
                  <span>主营业务</span>
                  <el-input v-model="merchant.company_main" type="textarea" :rows="1" />
                </div>
              </el-col>
              <el-col :span="8">
                <div class="input-wrapper">
                  <span>企业实际省市区信息</span>
                  <el-cascader
                    ref="cascader_now"
                    v-model="selectedOptions_now"
                    size="medium"
                    :props="cascaderProps"
                  />
                </div>
              </el-col>
              <el-col :span="8">
                <div class="input-wrapper">
                  <span>企业实际详细地址</span>
                  <el-input v-model="merchant.on_address" size="medium" />
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="56">
              <el-col :span="8">
                <div class="input-wrapper">
                  <span>第一联系人</span>
                  <el-input v-model="merchant.contact" size="medium" />
                </div>
              </el-col>
              <el-col :span="8">
                <div class="input-wrapper">
                  <span>联系方式</span>
                  <el-form-item prop="telephone">
                    <el-input v-model="merchant.telephone" size="medium" />
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="input-wrapper">
                  <span>联系邮箱</span>
                  <el-form-item prop="email">
                    <el-input v-model="merchant.email" size="medium" />
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>
      <el-card shadow="hover" class="indicators">
        <h3>企业经营指标</h3>
        <div class="input-container">
          <el-form>
            <el-row :gutter="56">
              <el-col :span="6">
                <div class="input-wrapper">
                  <span>门市数量</span>
                  <el-input v-model="merchant.shop_number" size="medium" />
                  <span v-if="merchant.shop_number<0" style="color:red">门市数量不能为负值</span>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="input-wrapper">
                  <span>接待量</span>
                  <el-input v-model="merchant.reception_number" size="medium" />
                  <span v-if="merchant.reception_number<0" style="color:red">门市数量不能为负值</span>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="input-wrapper ability">
                  <span>是否有再次分销能力</span>
                  <el-select v-model="merchant.extend_agent">
                    <el-option label="是" :value="1" />
                    <el-option label="否" :value="0" />
                  </el-select>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="input-wrapper">
                  <span>拓展规划</span>
                  <el-input v-model="merchant.extend_content" type="textarea" :rows="1" />
                </div>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>
      <el-card shadow="hover" class="qualification">
        <h3>企业资质审查</h3>
        <div class="img-container">
          <div class="img-item">
            <h5>营业执照</h5>
            <div>
              <template v-if="merchant.business_license">
                <el-image
                  :src="`${merchant.business_license}`"
                  :preview-src-list="[merchant.business_license]"
                  alt
                />
              </template>
              <template v-else>为上传此资质</template>
            </div>
          </div>
          <div v-if="merchant.company_type==='TRIP_COMPANY'" class="img-item">
            <h5>旅行社经营许可证</h5>
            <div>
              <el-image
                :src="`${merchant.trip_business}`"
                :preview-src-list="[merchant.trip_business]"
                alt
              />
            </div>
          </div>
          <div v-if="merchant.company_type==='TRIP_COMPANY'" class="img-item">
            <h5>旅行社责任险保单</h5>
            <div>
              <el-image
                :src="`${merchant.trip_insurance}`"
                :preview-src-list="[merchant.trip_insurance]"
                alt
              />
            </div>
          </div>
          <div v-if="merchant.company_type==='TRIP_COMPANY'" class="img-item">
            <h5>分公司备案登记证</h5>
            <div>
              <el-image
                :src="`${merchant.branch_certificate}`"
                :preview-src-list="[merchant.branch_certificate]"
                alt
              />
            </div>
          </div>
          <div class="img-item">
            <h5>法人身份证正面</h5>
            <div>
              <el-image
                :src="`${merchant.legal_person_id_true}`"
                :preview-src-list="[merchant.legal_person_id_true]"
                alt
              />
            </div>
          </div>
          <div class="img-item">
            <h5>法人身份证反面</h5>
            <div>
              <el-image
                :src="`${merchant.legal_person_id_false}`"
                :preview-src-list="[merchant.legal_person_id_false]"
                alt
              />
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import {
  getMerchantInfo,
  createChild,
  queryArea,
  getProvince
} from '@/api/merchant'
export default {
  name: 'Multiplexing',
  data() {
    // 判断邮箱是否通过
    var emailPass = (rule, value, callback) => {
      var ema = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/
      if (value === '') {
        callback(new Error('邮箱不能为空'))
      } else if (!ema.test(value)) {
        callback(new Error('邮箱格式不正确'))
      } else {
        callback()
      }
    }
    // 判断电话号码是否通过
    var telephonePass = (rule, value, callback) => {
      var tel = /^[1][3,4,5,7,8][0-9]{9}$/
      if (value === '') {
        callback(new Error('电话号码不能为空'))
      } else if (!tel.test(value)) {
        callback(new Error('电话号码格式不正确'))
      } else {
        callback()
      }
    }
    return {
      merchant: {},
      company_name: '',
      companyTypeMap: {
        TRIP_COMPANY: '旅游公司',
        CAR_COMPANY: '用车公司',
        GEO_COMPANY: '景区商家',
        VISA_COMPANY: '签证商务公司',
        OTHER_COMPANY: '其他'
      },
      selectedOptions: [],
      selectedOptions_now: [],
      dialogApplyVisible: false,
      form: {
        review: '',
        content: ''
      },
      sendNumberForm: {
        telephone: '',
        email: ''
      },
      checkMsg: {},
      cascaderProps: {},
      dialogVisible: false,
      parent_name: '',
      rules: {
        email: [{ validator: emailPass, trigger: 'blur' }],
        telephone: [{ validator: telephonePass, trigger: 'blur' }]
      }
    }
  },
  computed: {
    uid() {
      return this.$route.params && this.$route.params.uid
    },
    success_review() {
      const obj = {}
      for (let i = 0; i < this.reviewList.length; i++) {
        if (this.reviewList[i].status === 'SUCCESS_REVIEW') {
          obj['time'] = this.reviewList[i].updated_at
          obj['name'] = this.reviewList[i].name
        }
      }
      return obj
    },
    reject_review() {
      const obj = {}
      for (let i = 0; i < this.reviewList.length; i++) {
        if (this.reviewList[i].status === 'REJECT_REVIEW') {
          obj['time'] = this.reviewList[i].updated_at
          obj['name'] = this.reviewList[i].name
        }
      }
      return obj
    },
    success_pass() {
      const obj = {}
      for (let i = 0; i < this.reviewList.length; i++) {
        if (this.reviewList[i].status === 'SUCCESS_PASS') {
          obj['time'] = this.reviewList[i].updated_at
          obj['name'] = this.reviewList[i].name
        }
      }
      return obj
    }
  },
  created() {
    const that = this
    that.cascaderProps = {
      lazy: true,
      lazyLoad(node, resolve) {
        that.fetchLocalInfo(node, resolve)
      }
    }
    this.getMerchantInfo()
  },
  methods: {
    async getMerchantInfo() {
      getMerchantInfo().then((res) => {
        this.merchant = res.data.data
        this.merchant.company_type = this.merchant.company_type_display
        this.company_name = this.merchant.company_name
        // 级联选择器option -------
        this.selectedOptions = []

        this.selectedOptions.push(
          parseInt(this.merchant.province),
          parseInt(this.merchant.city),
          parseInt(this.merchant.area)
        )
        this.selectedOptions_now = []
        this.selectedOptions_now.push(
          parseInt(this.merchant.on_province),
          parseInt(this.merchant.on_city),
          parseInt(this.merchant.on_area)
        )
        setTimeout(() => {
          this.$refs.cascader.panel.lazyLoad()
          this.$refs.cascader_now.panel.lazyLoad()
        }, 1500)
      })
    },
    createChild() {
      this.dialogApplyVisible = false
      this.$refs.merchantForm.validate((valid) => {
        if (
          valid &&
          this.company_name !== this.merchant.company_name &&
          this.merchant.reception_number >= 0 &&
          this.merchant.shop_number >= 0
        ) {
          this.merchant.province = this.selectedOptions[2]
          this.merchant.city = this.selectedOptions[1]
          this.merchant.area = this.selectedOptions[0]
          this.merchant.on_province = this.selectedOptions_now[2]
          this.merchant.on_city = this.selectedOptions_now[1]
          this.merchant.on_area = this.selectedOptions_now[0]
          createChild(this.merchant)
            .then((res) => {
              console.log('123', res.data.code)
              if (res.data.code === 200) {
                this.$message({
                  showClose: true,
                  message: '已成功提交二级商户申请，请等待审核',
                  duration: 3000,
                  type: 'success'
                })
                this.$router.push({ name: 'merchantApply' })
                console.log('456')
              }
            })
            .catch(() => {
              console.log('和已有企业名称重复')
            })
        } else {
          this.$message({
            showClose: true,
            message: '填写信息有误',
            duration: 3000,
            type: 'error'
          })
          return false
        }
      })
    },
    fetchLocalInfo(node, resolve) {
      if (node.root) {
        this.queryProvince(node, resolve)
        return
      }
      this.queryArea(node, resolve)
    },
    queryProvince(node, resolve) {
      getProvince().then((response) => {
        const data = response.data.data
        //
        const nodes = data.map((item) => ({
          value: item.code,
          label: item.name,
          leaf: false
        }))
        resolve(nodes)
      })
    },
    queryArea(node, resolve) {
      const level = node.level + 1
      queryArea(node.value, level).then((response) => {
        const data = response.data.data
        const nodes = data.map((item) => ({
          value: item.code,
          label: item.name,
          leaf: level === 3
        }))
        resolve(nodes)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  padding: 24px;
}
.header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .el-steps {
    min-width: 36vw;
    padding: 13px 64px;
    background-color: #f5f7fa;
  }
  .button-group {
    flex: 1;
    text-align: right;
  }
  .send-number {
    margin-bottom: 24px;
  }
}

.basic-information {
  border: solid 1px #dddddd;
  h3 {
    margin: 0px;
    margin-bottom: 24px;
  }
  .input-container {
    .input-wrapper {
      //width: 255px;
      margin-bottom:24px;
      span {
        display: inline-block;
        margin: 0 0 16px;
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
}

.indicators {
  border: solid 1px #dddddd;
  margin-top: 40px;
  h3 {
    margin: 0px;
    margin-bottom: 24px;
  }
  .input-container {
    // margin: 32px 32px 0 16px;
    .input-wrapper {
      //width: 255px;
      margin-bottom: 8px;
      span {
        display: inline-block;
        margin: 0 0 16px;
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
}

.qualification {
  border: solid 1px #dddddd;
  margin-top: 40px;
  h3 {
    margin: 0px;
    margin-bottom: 24px;
  }
  .img-container {
    margin: 32px 16px 16px;
    display: flex;
    justify-content: space-between;
    .img-item {
      h5 {
        // display: inline-block;
        margin: 0 0 16px;
        font-size: 16px;
        font-weight: bold;
      }
      div {
        width: 128px;
        height: 128px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.tips {
  // position: absolute;
  color: red;
  margin-bottom: 0;
  // left: 1212px;
}
.el-cascader,
.el-select {
  display: block;
}
</style>

